<template>
	<view class="ratetips-list">
		<u-tabs class="ratetips-list-tabs" :activeStyle="tabsStyle" :inactiveStyle="tabsStyle" lineWidth="40"
			:scrollable="false" :list="list1" @click="click"></u-tabs>
		<!-- date -->
		<view class="date" @tap="show=true">
			时间： <u--input :value="formatParamTime(params.month, 'year-month')" disabled></u--input>
		</view>
		<mescroll-uni class="list" :height="height+'px'" @init="mescrollInit" :down="down" @down="downCallback"
			@up="upCallback">
			<view class="list-item" v-for="(item,index) in list" :key="index">
				<view class="list-item-title">
					{{getIndex(index)}}、{{item.customername}}{{item.customerphone}}{{item.address}}
				</view>
				<view style="margin:10rpx 0">
					<template v-for="(attr,attrIndex) in item.attrLabelList">
						<view :key="attrIndex">
							<text class="list-item-desc">{{attr.text}}</text>：<text>{{attr.value}}</text>
						</view>
					</template>
				</view>
				<view class="list-item-btn">
					查看订单
				</view>
			</view>
		</mescroll-uni>
		<!-- 时间选择器 -->
		<u-datetime-picker :show="show" v-model="params.month" mode="year-month" title="日期选择" @close="show = false"
			@cancel="show = false" @confirm="confirmDate" closeOnClickOverlay></u-datetime-picker>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		publicConfig
	} from '@/api'
	export default {
		mixins: [MescrollMixin],
		onLoad({
			eventtype
		}) {
			this.params.eventtype = eventtype || ''
			this.getYearMonth()
			this.setHeight()

		},
		data() {
			return {
				down: {
					auto: false
				},
				list1: [{
					name: '全部维修',
					value: 0,
				}, {
					name: '维修好评',
					value: 1,
				}, {
					name: '送机好评',
					value: 2,
				}, ],
				tabsStyle: {
					color: '#FFF'
				},
				show: false,
				params: {
					navtype: 0,
					month: '',
					eventtype: '',
				},
				height: "",
				list: []
			}
		},
		methods: {
			getIndex(i) {
				let index = i
				return ++index
			},
			click(item) {
				this.params.navtype = item.value
				this.downCallback()
			},
			getYearMonth() {
				let date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				month < 10 ? month = `0${month}` : month
				this.params.month = this.formatParamTime(`${year}-${month}-01`, 'year-month')
			},
			confirmDate(e) {
				this.params.month = e.value
				this.downCallback()
				this.show = false
			},
			// 下拉刷新
			downCallback(e) {
				this.list = []
				this.mescroll.resetUpScroll()
			},
			// 上拉加载
			upCallback(page) {
				this.time = new Date().getTime()
				this.formInit(page.num, this.time)
			},
			async formInit(page, time) {
				try {
					const params = JSON.parse(JSON.stringify({
						...this.params,
						page
					}))
					params.month = params.month ? this.formatParamTime(params.month, 'year-month') +
						'-01' : ''
					const {
						data,
						code
					} = await publicConfig('getOrderEventList', params, false)
					if (code === 1 && this.time === time) {
						this.list = [...this.list, ...data.data]
						const curPageLen = data.data.length
						const totalSize = data.data.total
						this.mescroll.endBySize(curPageLen, totalSize)
					}
				} catch (e) {
					this.mescroll.endErr()
				}
			},
			setHeight() {
				const that = this
				uni.getSystemInfo({
					success: ({
						windowHeight
					}) => {
						setTimeout(async () => {
							await that.$nextTick()
							uni.createSelectorQuery().selectAll('.list')
								.boundingClientRect(
									res => {
										// 获取列表定位
										that.height = windowHeight - res[0].top
									}).exec()
						})

					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.ratetips-list {
		&-tabs {
			background-color: #60d087;
		}
	}

	.date {
		padding: 30rpx;
		background: #FFF;
		display: flex;
		justify-content: center;
		align-items: center;

		::v-deep.u-input {
			background-color: #fff !important;
			border: 0.5px solid #dadbde !important;
		}
	}

	.list {
		margin: 0 30rpx;
		// background: linear-gradient(135deg, #c7e9fb, #a6defa, #c7e9fb, #c7e9fb, #c7e9fb);

		border-radius: 10rpx;

		&-item {
			font-size: 28rpx;
			padding: 20rpx 30rpx;
			border-bottom: 0.5px solid #ddd;

			&-desc {
				color: #666;
			}

			&-title {}
		}
	}
</style>